<!-- eslint-disable vue/multi-word-component-names -->
<template>  
    <div class="sidebar">  
      <div class="title">个人中心</div>  
      <el-divider />
      <ul class="nav-list">  
        <li   
          v-for="item in navItems"   
          :key="item.name"   
          :class="{ active: currentRoute === item.path }"   
          @click="navigateTo(item.path)"  
        >  
          {{ item.label }}  
        </li>  
      </ul>  

      <div class="logout"><li class="no-bullet" @click="Logout()">退出登录</li></div>
    </div>  
  </template>  
  
  <script setup lang="ts">  
  import { ref } from 'vue';  
  import { useRouter } from 'vue-router';  
  import {useUserStore} from "@/stores/user"
  
  const router = useRouter();
  const currentRoute = ref(router.currentRoute.value.path); 

  // 侧边导航栏对应的路由：
  const navItems = [  
    { name: 'UserInfo', label: '用户信息', path: '/admin/user-info' },  
    { name: 'AdoptionApplication', label: '领养申请', path: '/admin/adoption-application' },  
    { name: 'RescueApplication', label: '我的发布', path: '/admin/user-post' },  
    // { name: 'OrderManagement', label: '我的订单', path: '/admin/order-management' } , 
    

    // 订单管理：
    {name:"PurchasedOrders",label:"我的领养",path:"/admin/purchased"},
    {name:"SoldOrders",label:"发货",path:"/admin/sold"},
    {name:"DisputeOrders",label:"争议订单",path:"/admin/dispute"},

    // 发布宠物
    {name:"PostNewPet",label:"发布宠物",path:"/admin/post-newpet"},
  ];  
  
  // 导航到对应页面  
  const navigateTo = (path) => {  
    router.push(path); // 跳转到对应路由  
    currentRoute.value = path; // 更新当前路由  
  };  

  const Logout=()=>{
    console.log("退出登录")

     const userStore = useUserStore();
     userStore.clearUser();

     router.push({ path: "/login" });
  }
  </script>  
  
  <style scoped>  
  .sidebar {  
    width: 200px;
    background-color: #FAFAFA; 
    padding: 10px;  
    border-right: 1px solid #ddd; 
  }  
  
  .title {  
    font-size: 20px;  
    font-weight: bold;  
    margin-top: 10px;
    /* margin-bottom: 20px; /* 标题与导航项之间的间距 */   
    text-align: center;
  }  
  
  .nav-list {  
    list-style: none; 
    padding: 0; 
    text-align: center;
  }  
  
  .nav-list li {  
    padding: 10px 15px;  
    cursor: pointer; 
    transition: background-color 0.3s; 
  }  
  
  .nav-list li:hover {  
    background-color: #F2F0F0; /* 悬浮项的背景颜色 */  
  }  
  
  .nav-list li.active {  
    background-color: #F2F0F0; 
  }  
  .no-bullet {
  list-style: none;
  padding-left: 0;
}
.logout{
  margin-top: 280px;
  text-align: center;
}
.logout:hover{
    text-decoration: underline;
    color:#055B5C ;
}
  </style>  